import { Link, useNavigate } from 'react-router-dom'
import styles from './index.module.scss'
import { getUser } from '@/store/actions/profile'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Modal } from 'antd-mobile'
import { logout } from '@/store/actions/login'

const Profile = () => {
  const navigator = useNavigate()
  const dispatch = useDispatch()
  // 进入页面执行
  useEffect(() => {
    dispatch(getUser())
  }, [dispatch])

  // const user = useSelector((state) => state.profile.user.data)
  const user = useSelector((state) => state.profile.user)
  // console.log(user)
  // 退出登录
  const onLogout = async () => {
    const result = await Modal.confirm({
      content: '确定要退出吗',
    })
    if (result) {
      // 删除token信息
      dispatch(logout())
      // 跳转到登陆页
      navigator('/login')

      // Toast.show({ content: '点击了确认', position: 'bottom' })
    } else {
      // Toast.show({ content: '点击了取消', position: 'bottom' })
    }
  }

  return (
    <div className={styles.root}>
      <div className="profile">
        {/* 顶部个人信息区域 */}
        <div className="user-info">
          <div className="avatar">
            <img src={user.photo} alt="" />
          </div>
          <div className="user-name">{user.name}</div>
          <Link to="/profile/edit">个人信息</Link>
        </div>

        {/* 今日阅读区域 */}
        <div className="read-info">
          今日阅读 <span>10</span> 分钟
        </div>

        {/* 统计信息区域 */}
        <div className="count-list">
          <div className="count-item">
            <p>{user.art_count}</p>
            <p>动态</p>
          </div>
          <div className="count-item">
            <p>{user.follow_count}</p>
            <p>关注</p>
          </div>
          <div className="count-item">
            <p>{user.fans_count}</p>
            <p>粉丝</p>
          </div>
          <div className="count-item">
            <p>{user.like_count}</p>
            <p>被赞</p>
          </div>
        </div>
        {/* 退出 */}
        <button onClick={onLogout} className="btn">
          退出登录
        </button>
      </div>
    </div>
  )
}

export default Profile
